<template>
  <div class='cart'>
    <Scroll class='content' ref="scroll" :probe-type='3'>
      <CartList />
    </Scroll>
    <CartBotton />
  </div>
</template>
<script>
import NavBar from 'components/common/navbar/NavBar'
import CartList from './childComps/cartList.vue'
import Scroll from 'components/common/scroll/Scroll.vue'
import CartBotton from './childComps/cartBottonBar.vue'
import { mapGetters } from 'vuex'
export default {
  components: {
    NavBar,
    CartList,
    Scroll,
    CartBotton
  },
  data() {
    return {}
  },
  computed: {
    ...mapGetters(['carListLength'])
  },
  activated() {
    this.$refs.scroll.refresh()
  }
}
</script>
<style scoped>
.cart {
  position: relative;
  height: 100vh;
}

.content {
  height: calc(100vh - 142px);
  overflow: hidden;
}

.cart-nav {
  background-color: var(--color-tint);
  color: #fff;
  font-weight: 700;
}
</style>
